<template>
  <div class="root-layout">
    <!-- titleBar -->
    <div class="content-layout">
      <u-line></u-line>
      <!-- 海报内容 -->
      <div class="poster-root-layout">
        <div ref="content" class="poster-layout">
          <!-- 海报 -->
          <div class="poster-img">
            <!-- 背景 -->
            <img id="poster" style="width: 100%;" :src="curPosterImg" alt="" />
            <!-- 海报元素1 -->
            <div v-if="curPosterTag === 1" style="width: 100%; height: 100%; position: absolute;">
              <view class="poster1-msg-text1">{{ posterMessage.productName }}</view>
              <view class="poster1-msg-text2">{{ posterMessage.productSlogan }}</view>
              <view class="poster1-msg-text3">最高额度{{ posterMessage.maxQuota }}万</view>
              <span class="poster1-msg-text4">年化利率：<span style="color: black;">{{ posterMessage.minRate
                  }}%起</span></span>
              <span class="poster1-msg-text5">最长期限：<span style="color: black;">{{
      posterMessage.maxPeriods }}期</span></span>
              <span class="poster1-msg-text6">还款方式：<span style="color: black;">{{
      posterMessage.feepayType }}</span></span>
            </div>
            <!-- 海报元素2 -->
            <div v-if="curPosterTag === 2" style="width: 100%; height: 100%; position: absolute;">
              <view class="poster2-msg-text1 poster2-msg-text1-shape">{{ posterMessage.productName }}</view>
              <view class="poster2-msg-text1">{{ posterMessage.productName }}</view>
              <view class="poster2-msg-text2">{{ posterMessage.productSlogan }}</view>
              <view class="poster2-msg-text3">最高额度<view style="margin-top: 4px; color: #FFD593">
                  {{ posterMessage.maxQuota }}万</view>
              </view>
              <view class="poster2-msg-text4">月费率<view style="margin-top: 4px; color: #FFD593">{{ posterMessage.minRate
                  }}%起
                </view>
              </view>
              <view class="poster2-msg-text5">最长期限<view style="margin-top: 4px; color: #FFD593">
                  {{ posterMessage.maxPeriods }}期</view>
              </view>
              <span class="poster2-msg-text6">还款方式：{{ posterMessage.feepayType }}</span>
            </div>
            <!-- 海报元素3 -->
            <div v-if="curPosterTag === 3" style="width: 100%; height: 100%; position: absolute;">
              <view class="poster3-msg-text1">{{ posterMessage.productName }}</view>
              <view class="poster3-msg-text2">{{posterMessage.productSlogan}}</view>
              <view class="poster3-msg-text3">最高额度</view>
              <view class="poster3-msg-text3 poster3-msg-text3-right">{{ posterMessage.maxQuota }}万</view>
              <view class="poster3-msg-text4">月费率<view style="margin-top: 4px; color: #FFD593">{{ posterMessage.minRate
                  }}%起
                </view>
              </view>
              <view class="poster3-msg-text5">最长期限</view>
              <view class="poster3-msg-text5 poster3-msg-text5-right">{{ posterMessage.maxPeriods }}期</view>
              <span class="poster3-msg-text6">还款方式：{{ posterMessage.feepayType }}</span>
            </div>
            <!-- 海报元素4 -->
            <div v-if="curPosterTag === 4" style="width: 100%; height: 100%; position: absolute;">
              <view class="poster4-msg-text1 poster4-msg-text1-shape">{{ posterMessage.productName }}</view>
              <view class="poster4-msg-text1">{{ posterMessage.productName }}</view>
              <view class="poster4-msg-text2">{{ posterMessage.productSlogan }}</view>
              <span class="poster4-msg-text3">最高额度<span style="margin-top: 4px; margin-left:5px; color: #F05A42">{{
      posterMessage.maxQuota }}万</span></span>
              <span class="poster4-msg-text4">年化利率<span style="margin-top: 4px; margin-left:5px; color: #F05A42">{{
      posterMessage.minRate }}%起</span></span>
              <span class="poster4-msg-text5">最长期限<span style="margin-top: 4px; margin-left:5px; color: #F05A42">{{
      posterMessage.maxPeriods }}期</span></span>
              <span class="poster4-msg-text6">还款方式<span style="color: #F05A42; margin-left:5px;">{{
      posterMessage.feepayType }}</span></span>
            </div>
            <!-- 海报元素5 -->
            <div v-if="curPosterTag === 5" style="width: 100%; height: 100%; position: absolute;">
              <view class="poster5-msg-text1">{{ posterMessage.productName }}</view>
              <view class="poster5-msg-text2 poster5-msg-text2-shape">最高额度{{ posterMessage.maxQuota }}万</view>
              <view class="poster5-msg-text2">最高额度{{ posterMessage.maxQuota }}万</view>
              <view class="poster5-msg-text3">{{ posterMessage.productSlogan }}</view>
              <span class="poster5-msg-text4">年化利率：{{ posterMessage.minRate }}%起</span>
              <span class="poster5-msg-text5">最长期限：{{ posterMessage.maxPeriods }}期</span>
              <span class="poster5-msg-text6">还款方式：<span style="font-size: 13px;">{{ posterMessage.feepayType
                  }}</span></span>
            </div>
          </div>
          <!-- 信息 -->
          <div class="poster-msg">
            <div class="poster-head-bg">
              <u--image bgColor="#f05f5d" :src="posterMessage.imgUrl ? posterMessage.imgUrl : defaultHead" shape="circle" width="60" height="60"></u--image>
            </div>
            <div style="margin-left: 10px;">
              <view style="padding: 0px; margin-left: 20px; align-items:center; display: flex; flex-direction: row;">
                <view :style="getStyle()">{{ posterMessage.realName }}</view>
                <view style="font-size: 14px; margin-left: 20px; font-weight: 600">向您推荐</view>
              </view>
              <view style="font-size: 14px; margin-left: 10px; margin-left: 20px; margin-top: 10px; font-weight: 600">手机号码：{{
      posterMessage.phone }}</view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

import poster1 from '@/static/poster1.png'
import poster2 from '@/static/poster2.png'
import poster3 from '@/static/poster3.png'
import poster4 from '@/static/poster4.png'
import poster5 from '@/static/poster5.png'
import posterTemp1 from '@/static/poster_temp1.png'
import posterTemp2 from '@/static/poster_temp2.png'
import posterTemp3 from '@/static/poster_temp3.png'
import posterTemp4 from '@/static/poster_temp4.png'
import posterTemp5 from '@/static/poster_temp5.png'
import mineApi from "@/api/mine";
import passData from "@/api/requstUtil";
export default {
  data() {
    return {
      defaultHead: '', // 默认头像
      curPosterImg: poster1, // 当前显示的海报
      curPosterTag: 1, // 当前海报标识
      posterMessage: {}, // 海报元素内容
      listData: [
        {
          tag: 1,
          temp: posterTemp1,
          url: poster1
        },
        {
          tag: 2,
          temp: posterTemp2,
          url: poster2
        },
        {
          tag: 3,
          temp: posterTemp3,
          url: poster3
        },
        {
          tag: 4,
          temp: posterTemp4,
          url: poster4
        },
        {
          tag: 5,
          temp: posterTemp5,
          url: poster5
        },
      ],// 海报数组
      imageSrc: '', // 生成的海报图片-base64
      productData: {}
    }
  },
  onLoad(option) {
    console.log('小程序分享', JSON.parse(option.sharData))
    this.productData = {...JSON.parse(option.sharData)}
  },
  mounted () {
    console.log(3)
    this.defaultHead = '../../../static/icon_head_man.png'
    this.getMineData();   
  },
  methods: {
     // 获取个人信息
     async getMineData() {
      this.posterMessage = {...this.productData}
      this.curPosterTag = this.productData.curPosterTag
      this.curPosterImg = this.productData.curPosterImg
    },
    // 获取不同样式
    getStyle() {
      let color = ''
      switch (this.curPosterTag) {
        case 1:
          color = '#F65825'
          break;
        case 2:
          color = '#936DDE'
          break;
        case 3:
          color = '#D70501'
          break;
        case 4:
          color = '#FC463A'
          break;
        case 5:
          color = '#397BF4'
          break;
        default:
          color = '#F65825'
          break;
      }
      let style = {
        fontSize: '18px',
        fontWeight: 'bold',
        color: color
      }
      return style
    },
  
  }
}
</script>

<style lang="scss" scoped>
.root-layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .content-layout {
    height: calc(100vh - 50px);
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    .poster-root-layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;


      .poster-layout {
        border: solid 1px #efefef;
        display: flex;
        margin-top: 30px;
        flex-direction: column;
        align-items: center;
        width: calc(100% - 60px);
        position: relative;

        .poster-img {
          display: flex;
          flex-direction: columns;
          width: 100%;
          position: relative;

        }

        .poster-msg {
          width: 100%;
          background: white;
          height: calc(100%/7);
          display: flex;
          flex-direction: row;
          position: absolute;
          bottom: 0;
          align-items: center;
          justify-content: center;

          .poster-head-bg {
            background: #E7E7E7;
            border: solid #E7E7E7 1px;
            border-radius: 50%;
          }
        }

      }

      .poster-list {
        width: calc(100vw - 20px);
        padding-left: 10px;
        padding-right: 10px;
        display: flex;
        overflow-x: scroll;
        flex-direction: row;

        .poster-list-item {
          width: 120px;
        }
      }
    }

    .button-layout {
      padding: 10px;
      background: white;
    }
  }

  // ================================================= 海报元素1 =================================================
  .poster1-msg-text1 {
    width: 100%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, 30%);
    letter-spacing: 2px;
    font-size: 42px;
    color: white;
    font-weight: 950;
    font-style: oblique;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster1-msg-text2 {
    left: 50%;
    top: 13%;
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
    transform: translate(-50%, 50%);
    position: absolute;
    color: white;
    font-size: 18px;
    font-weight: 950;
  }

  .poster1-msg-text3 {
    left: 50%;
    bottom: 42.2%;
    letter-spacing: 3px;
    transform: translate(-50%, 50%);
    position: absolute;
    color: #F65825;
    font-size: 18px;
    font-weight: 950;
  }

  .poster1-msg-text4 {
    left: 20%;
    bottom: 27.7%;
    position: absolute;
    color: #F65825;
    font-size: 12px;
    font-weight: 800;
  }

  .poster1-msg-text5 {
    left: 20%;
    bottom: 23.6%;
    position: absolute;
    color: #F65825;
    font-size: 12px;
    font-weight: 800;
  }

  .poster1-msg-text6 {
    left: 20%;
    bottom: 19.3%;
    position: absolute;
    color: #F65825;
    font-size: 12px;
    font-weight: 800;
  }

  // ================================================= 海报元素2 =================================================
  .poster2-msg-text1 {
    width: 100%;
    left: 50%;
    transform: translate(-50%, 50%);
    font-size: 42px;
    text-align: center;
    color: #7e54cf;
    letter-spacing: 3px;
    position: absolute;
    font-family: fengguangmingruiti;
  }

  .poster2-msg-text1-shape {
    color: white;
    transform: translate(-50% + 0.5, 50%);
  }

  .poster2-msg-text2 {
    width: 100%;
    left: 50%;
    bottom: 42.5%;
    transform: translate(-50%, 50%);
    font-size: 14px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster2-msg-text3 {
    left: 52.5%;
    bottom: 29%;
    display: flex;
    font-weight: 550;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, 0%);
    font-size: 12px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster2-msg-text4 {
    left: 15%;
    bottom: 29%;
    display: flex;
    font-weight: 550;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster2-msg-text5 {
    right: 10%;
    bottom: 29%;
    display: flex;
    font-weight: 550;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster2-msg-text6 {
    width: 100%;
    left: 50%;
    bottom: 27%;
    transform: translate(-50%, 50%);
    font-size: 12px;
    text-align: center;
    color: #FFD593;
    letter-spacing: 1px;
    position: absolute;
  }

  // ================================================= 海报元素3 =================================================
  .poster3-msg-text1 {
    left: 50%;
    top: 49%;
    transform: translate(-50%, 0);
    letter-spacing: 2px;
    font-size: 22px;
    color: #DF3C26;
    font-weight: 950;
    letter-spacing: 2px;
    position: absolute;
  }
  .poster3-msg-text2 {
    width: 100%;
    text-align: center;
    top: 21%;
    letter-spacing: 2px;
    font-size: 16px;
    color: white;
    font-weight: bold;
    position: absolute;
  }

  .poster3-msg-text3 {
    left: 26.5%;
    bottom: 40.1%;
    letter-spacing: 2px;
    font-size: 14px;
    color: white;
    letter-spacing: 2px;
    position: absolute;
    font-weight: bold;
  }

  .poster3-msg-text3-right {
    color: #D70600;
    left: 55%;
    bottom: 39.8%;
    font-size: 16px;
  }

  .poster3-msg-text4 {
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 3.5%;
    transform: translate(-50%, 0);
    letter-spacing: 2px;
    font-size: 35px;
    color: #FDF0B4;
    letter-spacing: 2px;
    position: absolute;
    font-style: oblique;
    font-family: hangyixiaobohuayue;
  }

  .poster3-msg-text5 {
    left: 26.5%;
    bottom: 33%;
    letter-spacing: 2px;
    font-size: 16px;
    color: #D70600;
    letter-spacing: 2px;
    position: absolute;
    font-weight: 600;
  }

  .poster3-msg-text5-right {
    color: #D70600;
    left: 55%;
    transform: translate(0, 10%);
    font-size: 20px;
    font-weight: bold;
  }

  .poster3-msg-text6 {
    width: 100%;
    text-align: center;
    bottom: 25%;
    letter-spacing: 2px;
    font-size: 14px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
    font-weight: bold;
  }

  // ================================================= 海报元素4 =================================================
  .poster4-msg-text1 {
    top: 12%;
    left: 50%;
    transform: translate(-50%, 0);
    letter-spacing: 2px;
    font-size: 50px;
    color: white;
    font-weight: 950;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text1-shape {
    color: #ba1408;
    transform: translate(-50% + 2, -2%);
  }

  .poster4-msg-text2 {
    top: 7.5%;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    font-size: 16px;
    color: #FDF0B4;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text3 {
    bottom: 34.5%;
    left: 63.5%;
    font-weight: 550;
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text4 {
    bottom: 34.5%;
    left: 15.5%;
    font-weight: 550;
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text5 {
    bottom: 29.8%;
    left: 15.5%;
    font-weight: 550;
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text6 {
    bottom: 25%;
    left: 15.5%;
    font-weight: 550;
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
  }


  // ================================================= 海报元素5 =================================================
  .poster5-msg-text1 {
    font-size: 16px;
    color: white;
    right: 8.6%;
    font-weight: 600;
    top: 2.2%;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster5-msg-text2 {
    width: 100%;
    left: 50%;
    top: 7%;
    transform: translate(-50%, 50%);
    font-size: 30px;
    text-align: center;
    color: white;
    letter-spacing: 3px;
    position: absolute;
    font-family: douyuzhuiguangti;
  }

  .poster5-msg-text2-shape {
    transform: translate(-50% + 1, 50% - 6);
    color: rgb(76, 91, 209);
  }

  .poster5-msg-text3 {
    width: 100%;
    left: 50%;
    top: 16.5%;
    transform: translate(-50%, 50%);
    font-size: 16px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster5-msg-text4 {
    color: #155BF7;
    left: 27%;
    top: 26.9%;
    letter-spacing: 1px;
    position: absolute;
    font-size: 13px;
    font-weight: 950;
  }

  .poster5-msg-text5 {
    color: #155BF7;
    left: 27%;
    top: 31.4%;
    letter-spacing: 1px;
    position: absolute;
    font-size: 13px;
    font-weight: 950;
  }

  .poster5-msg-text6 {
    color: #155BF7;
    left: 27%;
    top: 35.9%;
    letter-spacing: 1px;
    position: absolute;
    font-size: 13px;
    font-weight: 950;
  }

}
</style>